<template>
  <view>
    <!-- 空白购物车的区域 -->
    <view class="empty-cart" v-if="cart.length === 0">
      <image src="/static/cart_empty@2x.png" class="empty-img" />
      <text class="text-tips">空空而也~</text>
    </view>

    <!-- 非空白购物车的区域 -->
    <view class="cart-container" v-else>
      <!-- 地址组件 -->
      <my-address></my-address>
      <image src="/static/cart_border@2x.png" class="address-border"></image>
      <!-- 购物车标题、店铺图标区域 -->
      <view class="cart-title">
        <uni-icons type="shop" size="18" />
        <text class="cart-title-text">购物车</text>
      </view>

      <!-- 购物车商品列表区域 -->
      <view class="cart-goods-list">
        <uni-swipe-action>
          <block v-for="(goods, i) in cart" :key="i">
            <uni-swipe-action-item :right-options="options" @click="swipeItemClickHandler(goods)">
              <my-goods :goods="goods" :show-radio="true" @radioChange="radioChangeHandler" :show-num-box="true"
                @num-change="numberChangeHandler" />
            </uni-swipe-action-item>
          </block>
        </uni-swipe-action>
      </view>
      <!-- 结算组件 -->
      <my-settle></my-settle>
    </view>
  </view>
</template>

<script>
  // 导入定义的混入：用于设置每次进入该页面，都会刷新显示 tabBar 栏购物车图标右上角的圆形数字徽标
  import mixins from '@/mixins/mixins.js'
  import {
    mapState,
    mapActions,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    mixins: [mixins], // 使用上面导入的混入
    data() {
      return {
        // 滑动删除组件的外观配置
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#C00000',
            fontSize: '14px'
          }
        }]
      };
    },
    computed: {
      ...mapState('m_cart', ['cart'])
    },
    methods: {
      ...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsCount', 'removeGoodsById']),
      // 更改商品是否选中状态的函数
      radioChangeHandler(goods) {
        // 根据商品左边复选框是否选中，调用 store m_cart模块的mutations方法updateGoodsState更改商品的状态
        this.updateGoodsState(goods)
      },
      // 点击或改变 my-goods 组件里的 uni-number-box 组件的商品数量框触发的change事件
      numberChangeHandler(goods) {
        // 调用 store cart 模块的 mutations 方法 updateGoodsCount 修改商品数量并持久化到本地存储
        this.updateGoodsCount(goods)
      },
      // 点击向左滑动的swipe action 组件的删除按钮事件
      swipeItemClickHandler(goods) {
        // 调用 store cart 模块的 mutations 方法 removeGoodsById 删除商品并持久化到本地存储
        this.removeGoodsById(goods)
      }
    }
  }
</script>

<style lang="scss">
  .cart-container {
    padding-bottom: 50px;
  }

  .cart-title {
    display: flex;
    align-items: center;
    height: 40px;
    padding-left: 5px;
    border-bottom: 1px solid #efefef;

    .cart-title-text {
      font-size: 14px;
      margin-left: 10px;
    }
  }

  .address-border {
    display: block;
    width: 100%;
    height: 5px;
  }
  
  .empty-cart {
    height: 750rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .empty-img {
      width: 90px;
      height: 90px;
    }
    .text-tips {
      font-size: 12px;
      margin-top: 15px;
    }
  }
</style>
